<script type="text/javascript" src="__ASSETS__/js/jquery.flot/jquery.flot.min.js"></script>
{{"<!--[if lte IE 8]>"|ToHTML}}<script language="javascript" type="text/javascript" src="__ASSETS__/js/jquery.flot/excanvas.min.js"></script>{{"<![endif]-->"|ToHTML}}
<script type="text/javascript" src="__ASSETS__/js/jquery.flot/jquery.flot.time.min.js"></script>
<script type="text/javascript" src="__ASSETS__/js/jquery.flot/jquery.flot.labels.min.js"></script>
<script>
(function(){
var ws,idElem='#CPU-Usage'; 
var _chartCPU,options = {
  series: {
    lines: {
      show: true,
      lineWidth: 2, 
      fill: true,
      fillColor: {
        colors: [{
          opacity: 0.25
        }, {
          opacity: 0.25
        }]
      } 
    },
    points: {
      show: false
    },
    shadowSize: 2
  },
  legend:{
    show: true
  },
  grid: {
    labelMargin: 10,
    axisMargin: 500,
    hoverable: true,
    clickable: true,
    tickColor: "rgba(0,0,0,0.15)",
    borderWidth: 0
  },
  colors: ["#B450B2", "#4A8CF7", "#52e136"],
  xaxis: {
    mode: "time",
    tickSize: [2, "second"],
    tickFormatter: function (v, axis) {
      var date = new Date(v);
      if (date.getSeconds() % 10 == 0) {
          var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
          var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
          var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

          return hours + ":" + minutes + ":" + seconds;
      } 
      return "&nbsp;";
    }
  },
  yaxis: {
    min: 0,
    max: 100,        
    tickSize: 10,
    tickFormatter: function (v, axis) {
      if (v % 10 == 0) return v + "%";
      return "";
    }
  }
};
var dataCPU = [], dataMem = [],totalPoints = 80; 
var updateInterval = 1000;
function reset(){
  dataCPU = [];
  dataMem = [];
}
function getData() {
  // Zip the generated y values with the x values
  var resCPU = [],resMem = [];
  for (var i = 0; i < dataCPU.length; ++i) {
    now = new Date().getTime();
    resCPU.push(dataCPU[i]);
    resMem.push(dataMem[i]);
  }
  return [{
    data: resCPU,
    //color: '#0f0',
    label: "CPU Usage"
  },{
    data: resMem, 
    //color: '#00f', 
    label: "Memory Usage"
  }];
}
function update(data) {
  _chartCPU.setData(data);
  // Since the axes don't change, we don't need to call plot.setupGrid()
  _chartCPU.setupGrid();
  _chartCPU.draw();
}
function chartCPU(data) {
  _chartCPU=$(idElem).data('plot');
  if(!_chartCPU) return initData(data);
  update(data);
}
function initData(data){
  _chartCPU = $.plot($(idElem), data, options);
  $(idElem).data('plot',_chartCPU);
}
function connectWS(onopen){
	if (ws) {
		if(onopen!=null)onopen();
		return false;
	}
	var url=App.wsURL(BACKEND_URL);
	ws = new WebSocket(url+"/server/dynamic");
	ws.onopen = function(evt) {
		if(onopen!=null)onopen();
	};
	ws.onclose = function(evt) {
	  ws = null;
  };
	ws.onmessage = function(evt) {
    //console.dir(evt.data);
    var info=JSON.parse(evt.data);
    if (dataCPU.length > totalPoints) dataCPU.shift();
    if (dataMem.length > totalPoints) dataMem.shift();
    var now=new Date().getTime();
    dataCPU.push([now,info.CPUPercent[0]]);
    dataMem.push([now,info.Memory.Virtual.usedPercent]);
    chartCPU(getData());
      /*
      {"CPUPercent":[16],"Load":{"load1":2.27,"load5":2.32,"load15":2.29},"Memory":{"Virtual":{"total":17179869184,"available":6600323072,"used":10579546112,"usedPercent":61.58106327056885,"free":331845632,"active":6295818240,"inactive":6268477440,"wired":2850160640,"buffers":0,"cached":0,"writeback":0,"dirty":0,"writebacktmp":0,"shared":0,"slab":0,"pagetables":0,"swapcached":0},"Swap":{"total":2147483648,"used":423886848,"free":1723596800,"usedPercent":19.73876953125,"sin":0,"sout":0}},"NetIO":[{"name":"all","bytesSent":2058803390,"bytesRecv":4646390936,"packetsSent":4721112,"packetsRecv":5545859,"errin":0,"errout":0,"dropin":0,"dropout":13,"fifoin":0,"fifoout":0}]}
      */
	};
}
$(function(){
  if(typeof(window._interval)!='undefined' && window._interval){
    clearInterval(window._interval);
    reset();
  }
  window._interval=window.setInterval(function(){
    connectWS(function(){
      ws.send("ping");
    });
    if($(idElem).length<1){
      clearInterval(window._interval);
      reset();
      window._interval=null;
    }
  },updateInterval);
});
})();
</script>